<template>
    <div class="main">
        <div class="left">
            <div class="title">
                <div class="scenicTitle">{{scenicEntity.name}}</div>
                <!-- <div @click="add(scenicEntity)">
                    <svg v-if="!scenicEntity.checked" t="1723756297445" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="11292" id="mx_n_1723756297446" width="30" height="30">
                        <path
                            d="M510.833431 62.695924c-247.644193 0-448.406636 200.762443-448.406636 448.406636 0 247.65545 200.762443 448.416869 448.406636 448.416869 247.65545 0 448.416869-200.76142 448.416869-448.416869C959.2503 263.458367 758.488881 62.695924 510.833431 62.695924zM779.544429 562.112328 560.358381 562.112328l0 219.186048-102.008278 0L458.350103 562.112328 239.164055 562.112328l0-102.008278 219.186048 0L458.350103 240.918002l102.008278 0 0 219.186048 219.186048 0L779.544429 562.112328z"
                            fill="#e16531" p-id="11293"></path>
                    </svg>
                    <svg v-if="scenicEntity.checked" t="1723756721305" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12397" width="30" height="30">
                        <path
                            d="M512 129.3312c210.432 0 382.6688 172.1856 382.6688 382.6688 0 210.432-172.1856 382.6688-382.6688 382.6688-210.432 0-382.6688-172.1856-382.6688-382.6688 0-210.432 172.1856-382.6688 382.6688-382.6688z m-1.024 534.6304l234.2912-271.2576-67.7888-58.5728-234.24 271.2576-101.7344-87.8592-58.5728 67.84 169.472 146.432 58.624-67.84z"
                            fill="#0e932e" p-id="12398"></path>
                    </svg>
                </div> -->
            </div>
            <div style="display: flex;">
                <div class="Detailtype">
                    {{scenicEntity.type}}
                </div>
                <div class="Detailtype">
                    Tourist Attractions
                </div>
                <div class="Detailtype">
                    The best
                </div>
            </div>

            <div style="display: flex;justify-content: flex-start;width: 100%;margin-top: 15px;">
                <div style="width: 50%;line-height: 25px;display: flex;align-items: center;">
                    <svg t="1723971959637" class="icon" viewBox="0 0 1025 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8677" width="200" height="200">
                        <path
                            d="M996.433 445.986h0.014l-254.227 192.377 97.936 313.007c1.533 4.884 2.369 10.069 2.369 15.494 0 27.317-21.18 49.488-47.319 49.488-10.364 0-19.936-3.497-27.725-9.423l-0.012 0.027-256.172-193.85-256.187 193.823c-7.789 5.926-17.359 9.423-27.724 9.423-26.138 0-47.319-22.171-47.319-49.488 0-5.425 0.836-10.611 2.369-15.494l97.939-313.007-254.217-192.377c-11.871-8.99-19.594-23.588-19.594-40.095 0-27.333 21.184-49.491 47.319-49.491v0h314.705l97.47-311.503c5.927-20.264 23.934-34.978 45.238-34.978s39.309 14.713 45.238 34.978l97.456 311.503h314.718c26.138 0 47.318 22.157 47.318 49.491 0 16.508-7.722 31.105-19.593 40.095z"
                            p-id="8678"></path>
                    </svg>
                    <div style="height: 25px;line-height: 25px;margin-left: 10px;color: #0041bb;">{{scenicEntity.score}}
                    </div>
                </div>
                <div style="width: 50%;line-height: 25px;display: flex;align-items: center;">
                    <svg t="1723972016793" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9675" width="200" height="200">
                        <path
                            d="M742.218667 526.666667c107.637333 0 194.848 87.573333 194.848 195.552V725.333333c0 103.168-93.578667 190.4-190.4 190.4h-45.44a30.4 30.4 0 0 1-2.517334-0.106666c-153.898667-12.778667-312.266667-80.128-411.914666-173.888C169.184 631.082667 86.933333 461.44 86.933333 303.818667c0-113.802667 84.405333-195.552 194.848-195.552 107.626667 0 194.837333 87.573333 194.837334 195.552 0 76.032-44.181333 138.773333-111.701334 169.12a507.658667 507.658667 0 0 0 81.6 100.266666c36.288 34.453333 76.544 62.336 118.752 81.813334 26.304-76.170667 94.186667-128.352 176.96-128.352z"
                            fill="#000000" p-id="9676"></path>
                    </svg>
                    <div style="height: 25px;line-height: 25px;margin-left: 10px;color: #0041bb;">
                        {{scenicEntity.phone?scenicEntity.phone:'none'}}</div>
                </div>
            </div>
            <div class="address">
                <svg t="1723972525642" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="11907" width="200" height="200">
                    <path
                        d="M501.76 30.72C337.92 30.72 204.8 163.84 204.8 330.24c0 163.84 161.28 371.2 299.52 540.16 135.68-171.52 299.52-373.76 299.52-540.16-2.56-166.4-135.68-299.52-302.08-299.52z m0 496.64c-110.08 0-197.12-89.6-197.12-197.12 0-110.08 89.6-197.12 197.12-197.12 110.08 0 197.12 89.6 197.12 197.12 2.56 110.08-87.04 197.12-197.12 197.12z m0 0"
                        fill="" p-id="11908"></path>
                    <path
                        d="M389.12 330.24c0 30.72 12.8 58.88 33.28 79.36 20.48 20.48 51.2 33.28 79.36 33.28 30.72 0 58.88-12.8 79.36-33.28 20.48-20.48 33.28-51.2 33.28-79.36 0-30.72-12.8-58.88-33.28-79.36-20.48-20.48-51.2-33.28-79.36-33.28-30.72 0-58.88 12.8-79.36 33.28-20.48 20.48-33.28 48.64-33.28 79.36z m0 0"
                        fill="" p-id="11909"></path>
                    <path
                        d="M504.32 1000.96c-192 0-386.56-61.44-386.56-176.64 0-64 64-117.76 176.64-151.04 20.48-5.12 40.96 5.12 46.08 25.6 5.12 20.48-5.12 40.96-25.6 46.08-84.48 23.04-122.88 56.32-122.88 79.36 0 40.96 122.88 102.4 314.88 102.4 192 0 314.88-61.44 314.88-102.4 0-23.04-46.08-58.88-130.56-81.92-20.48-5.12-30.72-25.6-25.6-46.08 5.12-20.48 25.6-30.72 46.08-25.6 117.76 30.72 186.88 87.04 186.88 153.6-7.68 115.2-202.24 176.64-394.24 176.64z m0 0"
                        fill="" p-id="11910"></path>
                </svg>
                <div style="height: 25px;line-height: 25px;margin-left: 10px;">{{scenicEntity.address}}</div>

            </div>
            <div class="address" v-if="scenicEntity.link">
                <svg t="1723972964270" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="12928" width="200" height="200">
                    <path
                        d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z"
                        fill="#2c2c2c" p-id="12929"></path>
                    <path
                        d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z"
                        fill="#2c2c2c" p-id="12930"></path>
                </svg>
                <div style="height: 25px;line-height: 25px;margin-left: 10px;color: #0041bb;">{{scenicEntity.link}}
                </div>

            </div>
            <div>
                <el-scrollbar height="150px" class="over">
                    {{scenicEntity.overview}}
                </el-scrollbar>

            </div>
        </div>
        <!-- <div class="right"> -->
        <!-- <div> -->
            <img class="right" :src="scenicEntity.image" />
            <!-- <img class="right" src="../../assets/images/home/Aqua 餐厅.jpg" /> -->
            <div class="close-right" @click="close">
                <img style="width: 20px;height: 20px;" src="../../assets/close.png" />
            </div>
        <!-- </div> -->
        
        <!-- </div>  -->
    </div>

</template>
<script lang="ts" setup>
    import { onMounted, onUnmounted, defineEmits } from "vue";
    import { ref } from 'vue';
    import { useStore } from 'vuex';
    const store = useStore();
    const emit = defineEmits();
    // let map = null;
    //点标记显示内容
    // 接收父组件传递的查询参数
    const props = defineProps({
        scenicEntity: {
            type: Object,
            required: true
        }
    });

    function add(params) {
        if (!params.checked) {
            params.checked = true
            store.commit('addEvents', params); // 通过 dispatch 触发 mutation

        }

    }
    function close(params) {
        emit('close');
    }

</script>
<style>
    .main {
        display: flex;

    }

    .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .left {
        padding: 15px;
        width: 60%;
    }

    .right {
        border-radius: 0px 15px 15px 0px;
        width: 40%;
    }
    .close-right{
        position: absolute;
    right: 10px;
    display: flex;
    background-color: #fff;
    border-radius: 50%;
    width: 27px;
    height: 27px;
    top: 10px;
    /* place-content: center; */
    align-items: center;
    justify-content: center;
    }
    .scenicTitle {
        font-size: 18px;
        font-weight: bold;
        color: #000;
    }

    .Detailtype {
        margin-right: 10px;
        background-color: #dadada;
        display: inline;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 15px;

        font-size: 12px;
    }

    .icon {
        width: 15px;
        height: 15px;
    }

    .address {
        width: 50%;
        line-height: 25px;
        display: flex;
        align-items: center;
        font-size: 12px;
    }

    .over {
        border-radius: 15px;
        background-color: #e2e2e2;
        padding: 10px;
    }
</style>